<template>
    <div class="desc-box">
        <div class="desc-bottom">
            <div class="desc-bottom__title">专属权益</div>
            <div class="desc-bottom__list">
                <div
                    class="desc-bottom__item"
                    v-for="(authorityItem, index) in props.authority"
                    :key="index"
                >
                    {{ authorityItem }}
                </div>
            </div>
        </div>
        <!-- <template v-for="item in props.info" :key="item.name">
            <template v-if="item.type === 'free'">
                <div class="desc-item">
                    <div class="desc-top">
                        <img
                            class="buy-img"
                            :src="item.img"
                            alt="北京华锐云空间"
                        />
                        <div class="desc-top__title">{{ item.name }}</div>
                        <div class="price">免费</div>
                        <div class="btn-buy-default" @click="onFreeExperience">
                            立即体验
                        </div>
                    </div>
                    <div class="desc-bottom">
                        <div class="desc-bottom__title">专属权益</div>
                        <div class="desc-bottom__list">
                            <div
                                class="desc-bottom__item"
                                v-for="(authorityItem, index) in item.authority[
                                    props.type
                                ]"
                                :key="index"
                            >
                                {{ authorityItem }}
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <template v-else-if="item.type === 'paid'">
                <template v-if="Array.isArray(item.code)">
                    <transition name="el-fade-in" mode="out-in">
                        <div class="desc-item" :key="item.active">
                            <div class="desc-top">
                                <img
                                    class="buy-img"
                                    alt="北京华锐云空间"
                                    :src="item.img"
                                />
                                <div class="desc-top__title">
                                    {{ item.name }}
                                </div>
                                <div class="desc-top__desc">
                                    {{ item.client[item.active] }}
                                </div>
                                <div
                                    class="mark-icon"
                                    @click="
                                        item.active = item.active == 0 ? 1 : 0
                                    "
                                >
                                    <img
                                        class="change-icon"
                                        :src="`${_oss_}images/buy-detail/change-icon.png`"
                                    />

                                    <div
                                        class="text"
                                        v-html="item.subProject[item.active]"
                                    ></div>
                                </div>
                                <div class="price">
                                    {{
                                        props.priceMap[item.code[item.active]]
                                            .price[props.unit]
                                    }}<span class="unit">/{{ getUnit() }}</span>
                                </div>
                                <div
                                    :class="
                                        IsCheckBuyStatus(item.code[item.active])
                                            ? 'btn-buy-default'
                                            : 'btn-buy'
                                    "
                                    @click="
                                        onBuy(
                                            item.code[item.active],
                                            item.authority[props.type][
                                                item.active
                                            ]
                                        )
                                    "
                                >
                                    {{
                                        IsCheckBuyStatus(item.code[item.active])
                                            ? "已开通"
                                            : "立即开通"
                                    }}
                                </div>
                            </div>
                            <div class="desc-bottom">
                                <div class="desc-bottom__title">专属权益</div>
                                <div class="desc-bottom__list">
                                    <div
                                        class="desc-bottom__item"
                                        v-for="(authorityItem, index) in item
                                            .authority[props.type][item.active]"
                                        :key="index"
                                    >
                                        {{ authorityItem }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
                </template>
                <template v-else>
                    <div class="desc-item">
                        <div class="desc-top">
                            <img
                                alt="北京华锐云空间"
                                class="buy-img"
                                :src="item.img"
                            />
                            <div class="desc-top__title">
                                {{ item.name }}
                            </div>
                            <div class="desc-top__desc">
                                {{ item.client }}
                            </div>
                            <div class="price">
                                {{ props.priceMap[item.code].price[props.unit]
                                }}<span class="unit">/{{ getUnit() }}</span>
                            </div>
                            <div
                                :class="
                                    IsCheckBuyStatus(item.code)
                                        ? 'btn-buy-default'
                                        : 'btn-buy'
                                "
                                @click="
                                    onBuy(item.code, item.authority[props.type])
                                "
                            >
                                {{
                                    IsCheckBuyStatus(item.code)
                                        ? "已开通"
                                        : "立即开通"
                                }}
                            </div>
                        </div>
                        <div class="desc-bottom">
                            <div class="desc-bottom__title">专属权益</div>
                            <div class="desc-bottom__list">
                                <div
                                    class="desc-bottom__item"
                                    v-for="(authorityItem, index) in item
                                        .authority[props.type]"
                                    :key="index"
                                >
                                    {{ authorityItem }}
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </template>

            <div class="desc-item" v-else-if="item.type == 'customization'">
                <div class="desc-top">
                    <img alt="北京华锐云空间" class="buy-img" :src="item.img" />
                    <div class="desc-top__title" style="color: #fff">
                        {{ item.name }}
                    </div>
                    <div class="price" style="color: #fff">联系客服沟通</div>
                    <div class="btn-buy" @click="onContactCustomerService">
                        立即开通
                    </div>
                </div>
                <div class="desc-bottom">
                    <div class="desc-bottom__title">专属权益</div>
                    <div class="desc-bottom__list">
                        <div
                            class="desc-bottom__item"
                            v-for="(authorityItem, index) in item.authority[
                                props.type
                            ]"
                            :key="index"
                        >
                            {{ authorityItem }}
                        </div>
                    </div>
                </div>
            </div>
        </template> -->
    </div>

    <div class="footer-placeholder"></div>
    <div class="footer">
        <div
            class="btn"
            :class="code && IsCheckBuyStatus(code) ? 'disabled' : ''"
            @click="onBtnBuy"
        >
            {{ buyBtnText }}
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";
const props = defineProps({
    type: {
        type: String,
        default: "template",
    },
    info: {
        type: Array,
        default: () => [],
    },
    priceMap: {
        type: Object,
        default: () => ({}),
    },
    buyList: {
        type: Object,
        default: () => [],
    },
    unit: {
        type: String,
        default: "year",
    },
    authority: {
        type: Array,
        default: () => [],
    },
});

const code = computed(() => {
    return Array.isArray(props.info.code)
        ? props.info.code[props.info.active]
        : props.info.code;
});

const buyBtnText = computed(() => {
    return {
        free: "立即体验",
        paid:
            code.value && IsCheckBuyStatus(code.value) ? "已开通" : "立即开通",
        customization: "立即开通",
    }[props.info.type];
});

const onBtnBuy = () => {
    ({
        free: () => onFreeExperience(),
        paid: () => onBuy(code.value, props.authority),
        customization: onContactCustomerService,
    })[props.info.type]();
};

const {
    onBuy,
    IsCheckBuyStatus,
    onFreeExperience,
    onContactCustomerService,
    getUnit,
} = useContent(props);
</script>
<style lang="scss" scoped>
.desc-box {
    width: 100%;
    display: flex;
    padding-top: 15px;
    overflow-y: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    .desc-item {
        width: 200px;
        margin-left: 15px;

        &:last-of-type {
            margin-right: 15px;
        }
    }

    .desc-bottom {
        width: 346px;
        margin: 14px auto 0;
        background-color: #fff;
        padding: 15px;
        color: #999;
        border-radius: 10px;

        &__title {
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            letter-spacing: 1px;
            color: #333;
        }

        &__list {
            margin-top: 20px;
        }

        &__item {
            position: relative;
            margin-bottom: 14px;
            font-size: 14px;
            line-height: 1.4em;
            padding-left: 22px;

            &:last-of-type {
                margin-bottom: 0;
            }

            &::before {
                content: "";
                width: 12px;
                height: 12px;
                position: absolute;
                top: 2px;
                left: 0;
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/mobile/buy-detail/icon-check-round.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }
    }
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 375px;
    height: 70px;
    background: #fff;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 345px;
        height: 46px;
        background: linear-gradient(86deg, #f5551b, #f7bc8b);
        box-shadow: 0px 1px 3px 0px rgba(149, 45, 4, 0.2);
        border-radius: 23px;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;

        &.disabled {
            filter: grayscale(1);
        }
    }

    &-placeholder {
        height: 70px;
    }
}
</style>
